<template>
  <div v-if="loadings"></div>
  <div v-else id="app">
    <div style="overflow: hidden;">
      <div class="header" style="z-index: 102">
        <my-header title="资讯" title-color="black"></my-header>
      </div>
      <div class="cate_nav" style="margin-top:1rem;" v-if="dataCotegory?dataCotegory.length>1:false">
        <div class="inner" :style="{'padding-left':dataCotegory.length>4?'0.5rem':0}" id="navInner"><a @click="changeCategory(item.code)" class="tab-item" :class="{active:selectCategoryCode==item.code}" v-for="item in dataCotegory"><img :src="selectCategoryCode==item.code?item.icon.img2:item.icon.img1">{{item.name}}</a></div>
      </div>
      <!--<my-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"></my-loadmore>-->
        <!--banner图-->
        <mt-swipe height="5rem" auto loop :style="{'margin-top': dataCotegory?(dataCotegory.length>1?'2rem':'1rem'):'1rem'}">
          <mt-swipe-item v-for="item in picData">
            <!--要加跳转-->
            <div class="swipe-content">
              <a style="display: block" @click="bannerPage(item)"><img :src="item.firstImg==null?'./assets/lazy.gif':item.firstImg.img1"></a>
              <div class="swiper-pagination-title">
                <h3>{{item.title}}</h3>
                <p>{{item.childTitle}}</p>
              </div>
            </div>
          </mt-swipe-item>
        </mt-swipe>
        <!--正文内容-->
        <div class="list-content" style="margin-top: 0.1rem">
          <div class="item-cc" v-for="item in dataList">
            <div class="singleImg_type" v-if="!item.isAdv&&(item.presentation==1)">
              <img class="singImg" :src="item.firstImg.img1"/>
              <h4>{{item.title}}</h4>
              <p></p>
              <img class="sourceImg" :src="item.sourceIcon" v-show="item.sourceIcon!=null&&item.sourceIcon!=''"><span class="spanStyle">{{(item.source==null||item.source=='')?item.author:item.source}}</span><i class="icon-view" style="margin-left:0.5rem;"></i> <p class="pStyle">{{item.visits}}</p>
            </div>
            <div class="ThreeImg_type" v-if="!item.isAdv&&(item.presentation==2)">
              <div class="hd"><span>{{item.publishTime}}</span><h3 @click="goDetail(item)">{{item.title}}</h3></div>
              <div class="type1" @click="goDetail(item)">
                <img :src="item.firstImg.img1" @click="goDetail(item)">
                <img :src="item.firstImg.img2" @click="goDetail(item)">
                <img :src="item.firstImg.img3" @click="goDetail(item)">
              </div>
              <div>
                <img class="sourceImg" style="margin-left: 0" :src="item.sourceIcon" v-show="item.sourceIcon!=null&&item.sourceIcon!=''"><span class="spanStyle">{{(item.source==null||item.source=='')?item.author:item.source}}</span><i class="icon-view" style="margin-left:1rem;"></i> <p class="pStyle">{{item.visits}}</p>
              </div>
            </div>
            <div class="ThreeImg_type" v-if="!item.isAdv&&(item.presentation==3)">
              <div class="hd"><span>{{item.publishTime}}</span><h3 @click="goDetail(item)">{{item.title}}</h3></div>
              <div class="type1" @click="goDetail(item)">
                <img :src="item.firstImg.img1" @click="goDetail(item)">
                <img :src="item.firstImg.img2" @click="goDetail(item)">
                <img :src="item.firstImg.img3" @click="goDetail(item)">
              </div>
              <div>
                <img class="sourceImg" style="margin-left: 0" :src="item.sourceIcon" v-show="item.sourceIcon!=null&&item.sourceIcon!=''"><span class="spanStyle">{{(item.source==null||item.source=='')?item.author:item.source}}</span><i class="icon-view" style="margin-left:1rem;"></i> <p class="pStyle">{{item.visits}}</p>
              </div>
            </div>
            <div class="SingleImg_Large_type" v-if="!item.isAdv&&(item.presentation==4)">
              <div class="hd"><span>{{item.publishTime}}</span><h3 @click="goDetail(item)">{{item.title}}</h3></div>
              <div class="type2" @click="goDetail(item)">
                <img :src="item.firstImg.img1" @click="goDetail(item)">
              </div>
              <div>
                <img class="sourceImg" :src="item.sourceIcon" v-show="item.sourceIcon!=null&&item.sourceIcon!=''"><span class="spanStyle">{{(item.source==null||item.source=='')?item.author:item.source}}</span><i class="icon-view" style="margin-left:0.5rem;"></i> <p class="pStyle">{{item.visits}}</p>
              </div>
            </div>
          </div>
        </div>
    </div>
    <my-footer></my-footer>
    <my-loadmore :show-loading="loading" tip="正在加载" v-if="false"></my-loadmore>
  </div>
</template>

<script>
  import header from 'common/vue/Header.vue'
  import footer from 'common/vue/footer.vue'
  import { Indicator } from 'mint-ui'
  import { Swiper, SwiperItem, LoadMore } from 'vux'

  export default {
    name: 'app',
    data () {
      return {
        dataList: [],
        picData: null,          // banner数据
        picArr: null,          // banner数据
        startPage: 1,             // 从第几页开始加载
        loading: false,
        api_header: 'http://120.132.120.185/',
        dataCotegory: null,       // 分类列表
        selectCategoryCode: 0,    // 当前列表分类id
      }
    },
    components: {
      'my-header': header,
      'mt-swipe': Swiper,
      'mt-swipe-item': SwiperItem,
      'my-loadmore': LoadMore,
      'my-footer': footer
    },
    created () {
      this.getWidth()
      //获取目录
      this.getCategory()
    },
    mounted () {

    },
    watch: {
      loading: function (val) {
        if (val) {
          Indicator.open()
        }else {
          Indicator.close()
        }
      }
    },
    methods: {
      loadTop() {
        // 加载更多数据
        console.log('加载更多')
      },
      loadBottom() {
        // 加载更多数据
        this.allLoaded = true;// 若数据已全部获取完毕
        console.log('加载更多')
      },
      getWidth() {
        var width = window.document.documentElement.clientWidth;
        console.log('宽度是',width / 7.5)
      },
      startHacking () {
        this.loading = true
        var that = this
        setTimeout(function () {
          that.loading = false
        },1000)
      },
      getCategory () {
//        window.alert('hahah')
        this.$http.get(this.api_header + 'common-main-mapp/headlines-mapi/headlines/discover/categories').then((response) => {
        // 响应成功回调
        this.dataCotegory = response.data.data;
        this.dataList = []
        this.selectCategoryCode = this.dataCotegory[0].code
        this.loadMore()
        this.getBanner()
        console.log('dataList is', this.dataCotegory);
      }, (response) => {
          // 响应错误回调
        })
      },
      changeCategory (code) {
        this.selectCategoryCode = code
        this.startPage = 1
        this.dataList = []
        this.loadMore()
        this.getBanner()
      },
      loadMore() {
        Indicator.open({
          spinnerType:'triple-bounce'
        })
        this.$http.get(this.api_header+ 'common-main-mapp/headlines-mapi/headlines/list/' + this.selectCategoryCode + '-02',
          {
            pageNo: this.startPage,
            pageSize: 30
          }).then((response) => {
          Indicator.close();
        // 响应成功回调
        this.dataList = response.data.data.data;
      }, (response) => {
          // 响应错误回调
        })
      },
      getBanner() {
        this.$http.get(this.api_header+ 'common-main-mapp/headlines-mapi/headlines/list/' + this.selectCategoryCode + '-01',
          {
            pageNo: this.startPage,
            pageSize: 30
          }).then((response) => {
          // 响应成功回调
          this.picData = response.data.data.data;
          for(var i=0;i<this.picData.length;i++) {
            this.picArr.push(this.picData[i].firstImg.img1)
          }
      }, (response) => {
          // 响应错误回调
        })
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  @import '../../css/find/article_list.less';
  html,body{
    background-color: #f3f3f3!important;
  }
</style>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
  }
</style>
